<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#EC4899',
                        accent: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, var(--tw-gradient-stops));
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <span class="text-xl font-bold text-dark">HelloWorld</span>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-dark hover:text-primary transition-colors duration-200 font-medium">Home</a></li>
                    <li><a href="#" class="text-dark hover:text-primary transition-colors duration-200 font-medium">About</a></li>
                    <li><a href="#" class="text-dark hover:text-primary transition-colors duration-200 font-medium">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto">
            <!-- 介绍部分 -->
            <section class="text-center mb-16">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-dark mb-4 leading-tight text-shadow">
                    Hello, <span class="text-primary">World!</span>
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 max-w-2xl mx-auto">
                    Welcome to this simple yet beautifully designed web page. This is where your journey into web development begins.
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#features" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2">
                        <i class="fa fa-arrow-down"></i>
                        Explore
                    </a>
                    <a href="#code" class="bg-white hover:bg-gray-50 text-primary border border-primary px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                        <i class="fa fa-code"></i>
                        View Code
                    </a>
                </div>
            </section>

            <!-- 特点部分 -->
            <section id="features" class="mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-12 text-center">
                    Why This Matters
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-lightbulb-o text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-3">Learning Basics</h3>
                        <p class="text-gray-600">Understanding the fundamentals is the first step towards mastering web development.</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                        <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-rocket text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-3">Building Blocks</h3>
                        <p class="text-gray-600">Every great website starts with a simple "Hello, World!". This is your foundation.</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                        <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-paper-plane text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-3">Endless Possibilities</h3>
                        <p class="text-gray-600">From here, the possibilities are endless. The web is your canvas.</p>
                    </div>
                </div>
            </section>

            <!-- 代码部分 -->
            <section id="code" class="mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6 text-center">
                    The Code
                </h2>
                <p class="text-gray-600 mb-8 text-center max-w-2xl mx-auto">
                    Here's the HTML code that makes this page possible. This is the classic "Hello, World!" example.
                </p>
                <div class="bg-dark rounded-xl p-6 overflow-x-auto">
                    <pre class="text-white"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Hello, World!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
    &lt;p&gt;This is a simple web page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-code text-primary text-2xl"></i>
                        <span class="text-xl font-bold">HelloWorld</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        A simple demonstration of web development basics.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">About</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">Stay Updated</h3>
                    <p class="text-gray-400 mb-4">
                        Subscribe to our newsletter for the latest updates.
                    </p>
                    <form class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                        <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors duration-200">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
                <p>&copy; 2023 HelloWorld. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- 平滑滚动 -->
    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2', 'shadow-lg');
                header.classList.remove('py-3', 'shadow-md');
            } else {
                header.classList.add('py-3', 'shadow-md');
                header.classList.remove('py-2', 'shadow-lg');
            }
        });
    </script>
</body>
</html>
